export const chartOption = {
  title: {
    text: "",
    textStyle: {
      fontSize: 16,
      color: "#fff",
    },
    top: "10",
    left: "center",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      animation: false,
    },
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderColor: "#333",
    textStyle: {
      color: "#fff",
    },
    formatter: function (params) {
      let result = params[0].axisValue + "<br/>";
      params.forEach((item) => {
        result += `${item.seriesName}: ${item.value} 元/kW<br/>`;
      });
      return result;
    },
  },
  legend: {
    data: ["备用价格"],
    textStyle: {
      color: "#fff",
    },
    top: "20",
  },
  grid: {
    top: "70",
    right: "20",
    bottom: "10",
    left: "30",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
    axisLabel: {
      color: "#fff",
      rotate: 45,
      interval: 4,
    },
    axisLine: {
      lineStyle: {
        color: "#333",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "价格(元/kW)",
    nameTextStyle: {
      color: "#fff",
    },
    axisLabel: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#333",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#333",
        opacity: 0.3,
      },
    },
  },
  series: [
    {
      name: "备用价格",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        color: "#00E5FF",
        width: 2,
      },
      itemStyle: {
        color: "#00E5FF",
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 229, 255, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(0, 229, 255, 0.1)",
            },
          ],
        },
      },
      data: [],
    },
  ],
};